<template>
  <div class="ReceivingAddContent">
    <div class="main">
      <div class="top">
        <div class="basic">基础信息</div>
        <el-form ref="ruleForm" :model="sform" :rules="rules" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="盘点名称" prop="name">
                <el-input v-clearEmoji v-model.trim="sform.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="仓库名称" prop="warehouseId">
                <el-select @click.native="reqWarehouseList" @change="selWear" style="width: 80%" filterable clearable
                  v-model="sform.warehouseId" popper-class="eloption" placeholder="请选择">
                  <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="盘点人员" prop="userId">
                <el-select style="width: 80%" v-model="sform.userId" @click.native="reqBuyerList" filterable clearable
                  popper-class="eloption" placeholder="请选择">
                  <el-option v-for="item in userList" :key="item.id" :label="item.employeeName" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24" :offset="0">
              <el-form-item label="备注：" prop="remark">
                <el-input v-clearEmoji v-model.trim="sform.remark" :rows="2" type="textarea" placeholder="最多输入150个字符"
                  maxlength="150" show-word-limit style="width: 80%" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="bottom">
        <!-- <div class="flexBOx"> -->

        <div class="basic">盘点明细</div>
        <div>
          <el-button size="small" class="submitBtn" style="margin-bottom: 10px;" @click="showDialogFn">
            添加
          </el-button>
          <el-button size="small" @click="moveSelectRow" style="width: 88px;">移除</el-button>
        </div>
        <div style="background-color: #fff;flex:1;">
          <vxe-table :column-config="{ resizable: true }" border ref="multipleTables" @checkbox-all="selFn"
            @checkbox-change="selFn" class="tablebox" size="medium" :row-config="{ isHover: true }"
            :scroll-y="{ enabled: true, gt: 21 }" align="center" style="width: 100%" max-height="350">
            <vxe-column type="checkbox" width="55" />
            <vxe-column type="seq" width="80" title="序号" />
            <vxe-column field="name" title="商品名称" :min-width="elTableAdaptationWidth('name', tableList)" />
            <vxe-column field="standard" title="规格" min-width="150" />
            <vxe-column field="unit" title="单位" width="100" />
            <vxe-column field="bigPacking" title="大包装" min-width="150" />
            <vxe-column field="category" title="商品分类" min-width="200" />
            <vxe-column field="region" title="商品区域" min-width="150" />
            <vxe-column field="aisle" title="通道名称" min-width="120" />
            <vxe-column field="position" title="仓位名称" min-width="150" />
            <vxe-column field="inventoryNum" title="库存数量" min-width="150" />
            <vxe-column title="操作" fixed="right" min-width="120">
              <template v-slot="{ row, $index }">
                <el-button type="text" style="margin-right: 10px; width: 88px; color: rgb(8, 175, 58)"
                  @click="movecolumn(row, $index)">
                  移除
                </el-button>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <div style="margin: 0 auto;padding-top: 20px;display: flex;padding-left: 80%;">
          <el-button v-has="'checkedAdd'" class="submitBtn" style="margin: 0 20px " @click.stop="submitForm">
            确定
          </el-button>
          <el-button @click.stop="cancelFn" style="width: 88px;">取消</el-button>
        </div>
        <!-- </div> -->
      </div>
    </div>
    <WarehouseDiaLog ref="warehouseDiaLogRef" @selectionIdListFn="selectionIdListFn" :warehouseId="sform.warehouseId"
      :showDialog.sync="showDialog">
    </WarehouseDiaLog>
  </div>
</template>

<script>
import { rsaDecrypt } from '@/utils/commonUtil3'
import WarehouseDiaLog from './components/WarehouseDiaLog.vue'
import { reqWarehouseList } from "@/api/warehouse";
import { reqPositionGoodsInfoByAisleId, reqAddStocktaking } from '@/api/storage'
import { reqBuyerList } from "@/api/procure";
import { printCheckInfo, checkPrinter } from "@/utils/printLODOP"
export default {
  name: 'ReceivingAdd',
  components: {
    WarehouseDiaLog
  },
  data() {
    return {
      sform: {
        name: '',
        warehouseId: '',
        remark: '',
        userId: ''
      },
      tableList: [],
      rules: {
        name: [
          {
            required: true,
            message: '请输入盘点名称',
            trigger: 'blur'
          }
        ],
        warehouseId: [
          {
            required: true,
            message: '请选择收货仓库',
            trigger: 'change'
          }
        ],
        userId: [
          {
            required: true,
            message: '请选择盘点人员',
            trigger: 'change'
          }
        ],
        remark: [
          {
            required: true,
            message: '请输入备注',
            trigger: 'blur'
          }
        ]
      },
      warehouseList: [],
      userList: [],
      showDialog: false,
      warehouseObj: {},
      moveList: []
    };
  },
  created() {
    this.reqWarehouseList();
  },
  methods: {
    async reqBuyerList() {
      const res = await reqBuyerList({ code: "4" });
      if (res.code === 200) {
        const data = res.data;
        this.userList = data;
        console.log(res.data);
      }
    },
    // 单个移除
    movecolumn(row) {
      // console.log('dianjai', row);
      const index = this.tableList.findIndex(item => item.commodityId === row.commodityId)
      this.tableList.splice(index, 1);
      const $table = this.$refs.multipleTables
      $table.remove(row)
      console.log('this.tableList', this.tableList);
    },
    async reqWarehouseList() {
      const res = await reqWarehouseList();
      if (res.code === 200) {
        this.warehouseList = res.data;
        console.log(this.warehouseList, "Ware");
      }
    },
    // 多选移除
    moveSelectRow() {
      const list = this.tableList.filter(item => !this.moveList.includes(item.positionId))
      this.tableList = list
      // console.log(this.tableList, 'this.tableList');
      const $table = this.$refs.multipleTables
      $table.removeCheckboxRow()
      console.log('this.tableList', this.tableList);
    },
    selWear(e) {
      this.warehouseObj = this.warehouseList.find(item => item.id === e)
      console.log('this.warehouseObj', this.warehouseObj);
      this.tableList = []
      const $table = this.$refs.multipleTables
      $table.loadData(this.tableList);
    },
    // 显示弹窗
    async showDialogFn() {
      this.$refs.ruleForm.validateField('warehouseId', (err) => {
        if (err) {
          return this.$message.warning('请先选择仓库');;
        } else {
          this.showDialog = true;
          this.$refs.warehouseDiaLogRef.getTreeList(this.warehouseObj)
        }
      });

    },
    // 选择商品
    async selectionIdListFn(list) {
      console.log('list', list);
      this.showDialog = false;
      const str = list.join(',');
      const res = await reqPositionGoodsInfoByAisleId({ idList: str })
      if (res.code === 200) {
        this.tableList = res.data;
        console.log('商品列表', res.data);
        const $table = this.$refs.multipleTables
        $table.loadData(this.tableList);
      }
    },
    selFn(c) {
      const $table = this.$refs.multipleTables
      const selection = $table.getCheckboxRecords()
      this.moveList = selection.map(item => item.positionId)
      console.log(' this.moveList', this.moveList);
    },
    submitForm() {
      let hasPrinter = checkPrinter();
      // if (!checkPrinter())
      //   return;
      console.log('this.tableList.length', this.tableList.length);
      // return
      if (this.tableList.length > 0) {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            const { name, warehouseId, remark, userId } = this.sform;
            const list = []
            this.tableList.map(item => {
              list.push({
                aisleId: item.aisleId,
                commodityId: item.commodityId,
                inventoryNum: item.inventoryNum,
                positionId: item.positionId,
                regionId: item.regionId,
                region: item.region,
                aisle: item.aisle,
                name: item.name,
                position: item.position,
              })
            })
            const res = await reqAddStocktaking({ name, warehouseId, remark, userId, detailsList: list })
            if (res.code === 200) {
              // const data = rsaDecrypt(res.data.data)
              console.log('data', res.data);
              if (hasPrinter) {
                printCheckInfo(res.data)
              }
              this.$message.success('添加成功,正在打印盘点单');
              // return
              this.closeTag("checkedInfo");
            }
          } else {
            console.log('error submit!!');
            this.$message.warning('请检查填写信息');;
            return false;
          }
        });
      } else {
        this.$message.warning('请先选择商品');;
      }

    },
    cancelFn() {
      this.closeTag("checkedInfo");
    }
  }
};
</script>

<style lang="scss" scoped>
.ReceivingAddContent {
  // padding: 10px;

  .main {
    display: flex;
    flex-direction: column;
    // padding: 30px;
    background-color: #eee;

    .top {
      padding: 32px;
      height: 27%;
      background-color: #fff;
      width: 100%;
      // border: 1px solid #ccc;
      border-radius: 6px;
      margin-bottom: 24px;


    }

    .bottom {
      height: 550px;
      // flex: 1;
      // height: 100%;
      padding: 32px;
      width: 100%;
      background-color: #fff;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}

.basic {
  font-family: PingFang SC, PingFang SC;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.9);
  margin-bottom: 32px;
  // height: 38px;
}
</style>
